<template>
  <div>
    <el-container>
      <el-header>
        <h1>密文检索</h1>
      </el-header>
      <el-main>
        <el-row></el-row>
        <el-row></el-row>
        <el-row :gutter="10">
          <el-col :span="13" :offset="4">
            <el-input placeholder="请输入搜索内容" v-model="searchQuery"></el-input>
            <!-- <el-input placeholder="请输入搜索内容" v-model="searchQuery" @change="search"></el-input>   -->
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
          </el-col>
        </el-row>
        <p>
        <pre>查询到{{ tableData.length }}条记录，耗时{{ elapsed_time }}秒。</pre>
        </p>
        <el-row type="flex" justify="center">
          <el-col :span="14">
            <el-table :data="tableData" max-height="580">
              <!-- <el-table :data="tableData" height="580">   -->
              <!-- <el-table-column type="doc_id" label="文档编号" width="150" show-overflow-tooltip></el-table-column> -->
              <el-table-column prop="doc_id" label="文档编号" width="100" show-overflow-tooltip></el-table-column>
              <!-- <el-table-column prop="AesTitle" label="标题密文" width="200" show-overflow-tooltip></el-table-column>   -->
              <el-table-column prop="title" label="标题" width="200" show-overflow-tooltip></el-table-column>
              <el-table-column prop="file_type" label="文档类型" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column width="140">
                <template slot-scope="scope">
                  <el-button @click="decrypt_btn(scope)">解密/下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog title="解密结果" :visible.sync="decrypt_dialog_visible">
      <h1>
        <pre>{{ decrypt_dialog_title }}</pre>
      </h1>
      <el-input type="textarea" :rows="23" readonly v-model="decrypt_dialog_content">
      </el-input>

    </el-dialog>


  </div>
</template>

<script>
import { ipcRenderer } from "electron";


export default {
  data() {
    return {
      searchQuery: '',
      decrypt_dialog_visible: false,
      decrypt_dialog_title: '解密对话框标题',
      decrypt_dialog_content: '解密对话框内容',
      tableData: [],
      elapsed_time: "0"

    };
  },
  methods: {
    search() {
      if (this.searchQuery == '') {
        this.$message({
          message: '搜索内容不能为空！',
          type: 'warning'
        });
        return
      }
      // console.time('encrypt_search');
      let startTime = performance.now();
      this.$message({
        message: '正在搜索，请稍后...',
        // type: 'success'
      });
      ipcRenderer.invoke("StringFheEncSearch", this.searchQuery).then((res) => {
        this.tableData = res
        let endTime = performance.now();
        this.elapsed_time = ((endTime - startTime) / 1000).toFixed(2)
        this.$message({
          message: `搜索完成，共${this.tableData.length}条结果！`,
          type: 'success'
        });
      });
    },
    decrypt_btn(scope) {
      const docId = scope.row.doc_id
      const title = scope.row.title
      const file_type = scope.row.file_type
      ipcRenderer.invoke("GetPlainTextByDocId", {
        docId,
        title,
        file_type
      }).then((res) => {
        if (scope.row.file_type == "txt") {
          this.decrypt_dialog_visible = true;
          this.decrypt_dialog_title = scope.row.title
          this.decrypt_dialog_content = res.content
          this.$message({
            message: '解密文件已下载到路径：' + res.file_path,
            type: 'success'
          });
        } else {
          this.$message({
            message: '只能展示txt文件！解密文件已下载到路径：' + res.file_path,
            type: 'success'
          });
        }
      });
    }
  }
}  
</script>
<style>
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-row {
  margin-bottom: 20px;

  /* margin-left: auto;
    margin-right: auto; */
  &:last-child {
    margin-bottom: 0;
  }
}

.el-table {
  width: 100%;
  max-height: 580px;
  overflow: auto;
  overflow-y: auto;
}

p {
  text-align: center;
  font-size: 15px;
  /* 加粗 */
  font-weight: bold;
}
</style>